<template>
	<view style="background-color: white;">
		<u-toast ref="uToast"></u-toast>
		<view class="p-top-box">
			<view @click="openArea" style="display: flex;">
				<view>{{areaName}}</view>
				<view class="p-img">
					<image :src="xialaImg.src" class="p-img"></image>
				</view>
			</view>
			<view class="p-top-search">
				<u-search placeholder="输入关键字搜索" :show-action="false" @change="changeRecord"
					v-model="kwRecord"></u-search>
			</view>
		</view>
		<view>
			<scroll-view style="height: 90vh;background-color: #ededed;" :scroll-top="scrollTop" class="scroll-Y"
				ref="sro" id="sro" @scrolltoupper="getList(true)" scroll-y="true" scroll-with-animation="true">
				<view class="r-content">
					<view v-for="(item, index) in recodeList" :key="index">
						<view v-if="item.type == 0">
							<view class="chat-notice" v-if="$isNull(item.time)">
								<span>{{ item.time }}</span>
							</view>
						</view>
						<view v-if="item.type == 1">
							<view class="chat-left">
								<view class="chat-sender">
									<view style="margin-top: 8px">
										<view @click="showUserInfo(item)">
											<img :src="item.headUrl" />
										</view>
										<view></view>
										<view class="chat-shadw">
											<view class="chat-left_triangle"></view>
											<rich-text class="rich-box" :nodes="item.msg" :user-select="true"></rich-text>
											<view class="chat-img-box" @click="showImg(item.imgList)">
												<image v-for="(imgUrl, index) in item.imgList" class="chat-img"
													:src="imgUrl"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="chat-notice-left" v-if="$isNull(item.time)">
								<span>{{ item.time }}</span>
							</view>
						</view>
						<view v-if="item.type == 2">
							<view class="chat-right">
								<view class="chat-receiver">
									<view style="margin-top: 8px">
										<view>
											<img :src="item.headUrl" />
										</view>
										<view></view>
										<view class="chat-shadw">
											<view class="chat-right_triangle"></view>
											<rich-text class="rich-box" :nodes="item.msg" :user-select="true"></rich-text>
											<view class="chat-r-img-box" @click="showImg(item.imgList)">
												<image v-for="(imgUrl, index) in item.imgList" class="chat-img"
													:src="imgUrl"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="chat-notice-right" v-if="$isNull(item.time)">
								<span>{{ item.time }}</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<u-popup v-model="areaShow" mode="bottom" :closeable="true" @close="closeArea">
				<view style="p-content">
					<view class="p-top">选择群</view>
					<view class="p-search">
						<u-search placeholder="输入内容搜索" bg-color="#ededed" @change="change" @search="search"
							v-model="keyword" :show-action="false" clearable></u-search>
					</view>
					<view style="height: 50vh;margin-top: 20rpx;">
						<u-cell-group>
							<u-cell-item v-for="(item, index) in areaIndexList" :arrow="false" :title="item.areaName"
								:key="index" @click="chooseArea(item)">
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup v-model="showUser" mode="bottom" :closeable="true" @close="closeUserInfo()">
				<view style="padding: 20px;margin-top: 15px;">
					<view style="display: flex;">
						<view>
							<image style="height:40px; width: 40px;" src="/static/imgs/weixin.png"></image>
						</view>
						<view style="color: #ababab;font-size: 16px;line-height: 40px;margin-left: 8px;">{{wxAccount}}
						</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view>
							<image style="height:40px; width: 40px;" src="/static/imgs/phone.png"></image>
						</view>
						<view style="color: #ababab;font-size: 16px;line-height: 40px;margin-left: 8px;">{{phonenumber}}
						</view>
					</view>
				</view>
				<view style="margin-bottom:8px;width: 90%;margin-left: 5%;">
					<u-button @click="copyUserInfo" :custom-style="customStyle" color="#009688" shape="circle"
						type="success">一键复制</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getChatRecord
	} from '../../apis/chat';
	export default {
		onLoad() {
			var _this = this;

			// 保存区域信息
			_this.areaIndexList = uni.getStorageSync('areaAllList')
			_this.areaList = _this.areaIndexList

			//默认选择全国群
			_this.areaName = _this.areaList[0].areaName
			_this.areaId = _this.areaList[0].id
		},
		data() {
			return {
				kwRecord: '',
				pageNo: 1,
				pageSize: 10,
				keyword: '',
				areaName: '',
				areaId: 0,
				areaIndexList: [],
				areaShow: false,
				xialaImg: {
					src: '../../static/imgs/xiala.png'
				},
				recodeList: [],
				prevent: false,
				scrollTop: 0,
				isTopChange: false,
				searData: {},
				showBackImg: true,
				showUser: false,
				phonenumber: '',
				wxAccount: ''
			}
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show(params)
			},

			changeRecord() {
				var _this = this
				if (_this.kwRecord.trim() == '') {
					//改变值

					return
				}

				console.log(_this.kwRecord)
				console.log(_this.areaName)
				console.log(_this.areaId)
				//执行搜索

				//重置信息
				_this.isTopChange = true
				_this.pageNo = 1
				_this.recodeList = []

				var chooseAreaId = ''
				if (_this.areaName != '全国群') {
					chooseAreaId = _this.areaId
				}

				_this.searData = {
					areaId: chooseAreaId,
					keyWord: _this.kwRecord.trim(),
					pageSize: _this.pageSize,
					pageNo: _this.pageNo
				}

				_this.getList(false)
			},

			getList(add) {
				var that = this
				console.log("that.prevent:" + that.prevent)
				console.log("that.isTopChange:" + that.isTopChange)
				console.log("add:" + add)
				//拦截改变后第一次进来
				if (that.prevent && !that.isTopChange) {
					console.log("拦截改变后第一次进来")
					//拦截结束，后释放开关
					that.prevent = false

					return
				}

				let jisuanHeight = 500
				if (add) {
					console.log("顶部触发的111111111")
					that.pageNo++;
					jisuanHeight = that.pageNo * jisuanHeight
				}

				if (that.isTopChange) {
					console.log("改变属性参数")
					//改变就需要重置页码
					that.pageNo = 1

					//拉到底部
					jisuanHeight = 6000

					//刷新值
					that.isTopChange = false

					//改变后第一次进来，肯定会促发上拉刷新，需要阻止进来
					//设置 阻止开关
					that.prevent = true
				}

				that.searData.pageNo = that.pageNo

				getChatRecord(that.searData).then((res) => {
					console.log("获取列表记录成功！！！！！！！！！！！！！")

					var list = res.data.data
					var oldList = that.recodeList

					if (list.length != 0) {

						for (var i = 0; i < oldList.length; i++) {
							var data = oldList[i]
							list.push(data)
						}

						that.recodeList = list
						that.scrollTop = jisuanHeight

						console.log("that.scrollTop:" + that.scrollTop)
						that.showBackImg = false
						that.scrollToBottom()
					} else {
						//展示没有图标背景图片
						if (oldList.length == 0) {
							that.showBackImg = true
						}
					}
				})
			},

			search() {
				let _that = this
				_that.areaIndexList = _that.areaList.filter((item) => item.areaName.includes(_that.keyword))
			},
			change() {
				let _that = this
				_that.areaIndexList = _that.areaList.filter((item) => item.areaName.includes(_that.keyword))
			},

			openArea() {
				this.areaShow = true;
			},

			closeArea() {
				this.areaShow = false;
			},

			chooseArea(area) {
				let _this = this

				_this.isTopChange = _this.areaName != area.areaName
				_this.areaName = area.areaName

				if (area.areaName == '全国群') {
					_this.areaId = ''
				} else {
					_this.areaId = area.id
				}

				console.log("_this.areaName:" + _this.areaName)
				console.log("area.areaName:" + area.areaName)

				//重置信息
				_this.pageNo = 1

				_this.searData.pageNo = _this.pageNo
				_this.searData.areaId = _this.areaId

				setTimeout(function() {
					_this.areaShow = false;

					console.log(" _this.isTopChange:" + _this.isTopChange)
					if (_this.isTopChange) {
						if (_this.kwRecord.trim() != '') {
							_this.prevent = true

							console.log("_this.prevent:" + _this.prevent)

							//重置信息
							_this.recodeList = []
							_this.getList(false)
						} else {
							console.log("清空聊天记录...........")

							//展示没有图标背景图片
							that.showBackImg = true

							_this.areaShow = false;
							_this.prevent = true
							_this.isTopChange = false
							_this.recodeList = []

						}
					}
				}, 10)
			},

			showImg(content) {
				let arrImg = content;

				wx.previewImage({
					current: arrImg,
					urls: arrImg,
				})
			},

			//渲染滚动条在最底部
			scrollToBottom() {
				console.log("我滚啦.....2222！！！")
				var _this = this
				_this.$nextTick(() => {
					uni.createSelectorQuery().in(_this).select("#sro").boundingClientRect(rect => {
						// console.log("height", rect.height)
						_this.scrollTop = rect.height * 10;

						//滚到底修改阻止
						_this.prevent = false
					}).exec()
				});

			},

			showUserInfo(item) {
				this.showUser = true
				this.phonenumber = item.phonenumber
				this.wxAccount = item.wxAccount
			},

			closeUserInfo() {
				this.showUser = false;
			},

			copyUserInfo() {
				var _this = this
				// 使用uni.setClipboardData进行复制操作
				let textToCopy = _this.wxAccount + "," + _this.phonenumber
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});

						_this.showUser = false
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.rich-box {
		font-size: 14px;
		line-height: 20px;
	}

	.chat-img-box {
		position: relative;
		left: 10px;
	}

	.chat-img {
		height: 80px;
		width: 80px;
		margin-top: 10px;
		margin-right: 8px;
		border-radius: 8px;
	}

	.chat-r-img-box {
		position: relative;
	}

	.p-top-search {
		width: 70%;
		margin-left: 10px;
	}

	.p-top-box {
		padding-top: 22rpx;
		padding-left: 22rpx;
		padding-bottom: 22rpx;
		font-size: 14px;
		line-height: 40px;
		display: flex;
		justify-content: space-around;
	}

	.p-content {
		// height: 700px;
		// display: flex;
	}

	.p-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 3px;
		margin-top: 5px;
	}

	.p-send-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 12px;
		line-height: 20px;
		color: #009688;
	}

	.p-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 14px;
		line-height: 20px;
	}

	.p-search {
		padding: 20rpx;
		margin-top: 50rpx;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: #ccccccb7;
	}

	.r-top {
		background-color: #f7f7f7f3;
	}

	.r-chat-name {
		font-size: 20px;
		height: 62px;
		line-height: 60px;
		margin-left: 30px;
	}

	.r-content {
		height: 90vh;
		/**  聊天背景 **/
		background-color: #ededed;
		border-top: solid #cccccc 1px;
		border-bottom: solid #eeeeee 1px;
		padding: 0 25px 0px 25px;
	}

	.r-input {
		background-color: white;
		height: 7vh;
		width: 100%;
		position: absolute;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.r-text {
		font-size: 80%;
		margin: 0 25px 0 25px;
	}

	.chat-shadw {
		box-shadow: 1px 3px 5px #888888;
		position: relative;
	}

	.chat-sender {
		clear: both;
		font-size: 80%;
	}

	.chat-sender view:nth-of-type(1) {
		float: left;
	}

	.chat-sender view:nth-of-type(2) {
		// margin: 0 50px 2px 50px;
		padding: 0px;
		color: #848484;
		font-size: 80%;
		text-align: left;
	}

	.chat-sender view:nth-of-type(3) {
		background-color: white;
		/*float: left;*/
		margin: 0 0px 12px 50px;
		padding: 10px 10px 10px 10px;
		border-radius: 7px;
		text-indent: -12px;
	}

	.chat-receiver {
		clear: both;
		font-size: 80%;
	}

	.chat-receiver view:nth-of-type(1) {
		float: right;
	}

	.chat-receiver view:nth-of-type(2) {
		// margin: 0px 50px 2px 50px;
		padding: 0px;
		color: #848484;
		font-size: 80%;
		// text-align: right;
	}

	.chat-receiver view:nth-of-type(3) {
		/*float:right;*/
		background-color: #b2e281;
		margin: 0px 50px 12px 0px;
		padding: 10px 10px 10px 10px;
		border-radius: 7px;
	}

	.chat-receiver view:first-child img,
	.chat-sender view:first-child img {
		width: 40px;
		height: 40px;
		border-radius: 15%;
	}

	.chat-left {
		margin-left: -20rpx;
	}

	.chat-left_triangle {
		height: 0px;
		width: 0px;
		border-width: 6px;
		border-style: solid;
		border-color: transparent white transparent transparent;
		position: relative;
		left: -22px;
		top: 3px;
	}

	.chat-right {
		margin-right: -20rpx;
	}

	.chat-right_triangle {
		height: 0px;
		width: 0px;
		border-width: 6px;
		border-style: solid;
		border-color: transparent transparent transparent #b2e281;
		position: absolute;
		right: -12px;
		top: 15px;
	}

	.chat-notice {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
		cursor: default;
	}

	.chat-notice-right {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: right;
		margin-bottom: 15px;
		margin-right: 40px;
	}

	.chat-notice-left {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: left;
		margin-left: 40px;
		margin-bottom: 15px;
	}

	.chat-notice-left span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}

	.chat-notice-right span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}

	.chat-notice span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}

	.r-but {
		/* border: blue solid 1px; */
		text-align: right;
		margin: 12px 25px 0 25px;
	}

	.r-but button {
		border: none;
		line-height: 20px;
		height: 26px;
		width: 70px;
		margin-right: 20px;
		background-color: #e6e6e6;
		outline: none;
	}

	.r-but button:hover {
		background-color: #1a810db7;
		color: white;
	}

	.r-w {
		position: relative;
		right: 16px;
		top: -72px;
		display: block;
		float: right;
	}

	.r-warn {
		border: solid #888888 1px;
		width: 138px;

		border-radius: 7px;
		background-color: white;
		line-height: 26px;
		font-size: 15px;
		text-align: center;
	}

	.r-warn:after {
		content: "";
		position: absolute;
		top: 22px;
		width: 10px;
		left: 105px;
		height: 10px;
		border: 1px solid #888;
		transform: rotate(45deg);
		border-top: 0;
		border-left: 0;
		background: #fff;
	}

	.t-content {
		line-height: 46rpx;
		// padding-top: 20rpx;
		padding-left: 2%;
		padding-right: 2%;
		font-size: 28rpx;
		height: 20vh;
		width: 420rpx;
		// background-color: white;
		// border-radius: 10rpx;
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	}
</style>